<template>
	<view class="fence-control-view">
		<view :class="currentMode===DrawMode.CircleMode?'current-mode':''" @tap="drawModeChange(DrawMode.CircleMode)"
			class="fence-control-btn">
			圆形
		</view>
		<view :class="currentMode===DrawMode.RectangleMode?'current-mode':''"
			@tap="drawModeChange(DrawMode.RectangleMode)" class="fence-control-btn">
			矩形
		</view>
		<view :class="currentMode===DrawMode.PolygonMode?'current-mode':''" @tap="drawModeChange(DrawMode.PolygonMode)"
			class="fence-control-btn">
			多边形
		</view>
		<view @tap="revoke" class="fence-control-btn" :class="canCancel?'can-cancel':'cannot-cancel'">
			撤销
		</view>
	</view>
</template>

<script>
	import {
		DrawMode
	} from "./config/fence-config.js"
	export default {
		data() {
			return {
				DrawMode: DrawMode
			}
		},
		props: {
			canCancel: {
				type: Boolean,
				default: false
			},
			currentMode: {
				type: String,
				default: null
			}
		},
		methods: {
			drawModeChange(mode) {
				if (this.currentMode === mode) {
					this.$emit('drawModeChange', null);
				} else {
					this.$emit('drawModeChange', mode);
				}
			},

			revoke() {
				if (this.canCancel) {
					this.$emit('revoke', 1);
				}
			}
		}
	}
</script>

<style scoped>
	.fence-control-view {
		min-width: 500rpx;
		background: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
	}

	.fence-control-btn {
		padding: 10rpx 20rpx;
	}

	.current-mode {
		border-radius: 10rpx;
		background-color: rgb(240, 240, 240);
		font-weight: bold;
	}

	.can-cancel {
		color: "#000"
	}

	.cannot-cancel {
		color: #ccc;
	}
</style>